import React, { useRef, useState } from "react";
import { Button, Image, Space, message } from "antd";
import { ProColumnType, ProTable } from "@ant-design/pro-components";
import { collectionRecordTypes  } from "@/constants/types";
import { calculateTableWidth } from "@/utils/util";
import { PlusOutlined } from "@ant-design/icons";
import CollectionRecord from "../modals/CollectionRecord";
import WriteOffRecord from "../modals/WriteOffRecord";
import { useRequest } from "ahooks";
import { paymentList, paymentAdd } from "../services";

const CollectionRecords = () => {
  const actionRef = useRef();

  const [currentRow, setCurrentRow] = useState<collectionRecordTypes | null>(null);
  //
  const [addVisible, setAddVisible] = useState(false);
  const {loading: addLoading, runAsync: addApi} = useRequest(paymentAdd, {manual: true});

  // 
  const [writeOffVisible, setWriteOffVisible] = useState(false);


  const addProps = {
    title: "新增收款记录",
    visible: addVisible,
    loading: addLoading, 
    onCancel: () => {
      setAddVisible(false);
    },
    onSubmit: async (params: any) => {
      const res = await addApi(params);
      if (res?.code === "0") {
        addProps.onCancel();
        message.success("操作成功!");
        actionRef?.current?.reload();
      }
    }
  }
  // 核销记录
  const writeOffProps = {
    visible: writeOffVisible,
    title: "核销记录",
    currentRow,
    onCancel: () => {
      setWriteOffVisible(false);
      setCurrentRow(null);
    }
  }

  const handleAdd = () => {
    setAddVisible(true);
  }
  const handleWriteOff = (record: collectionRecordTypes) => {
    setCurrentRow(record);
    setWriteOffVisible(true);
  }

  const columns: ProColumnType<collectionRecordTypes> [] = [
    {
      title: "时间",
      dataIndex: "time",
      valueType: "dateRange",
      hideInTable: true,
    },
    {
      title: "公司简称",
      dataIndex: "customerName",
      hideInTable: true
    },
    {
      title: "客户编码",
      dataIndex: "customerCode",
      search: false,
      width: 120
    },
    {
      title: "公司简称",
      dataIndex: "customerName",
      search: false,
      width: 120
    },
    {
      title: "付款方名称",
      dataIndex: "payer",
      search: false,
      ellipsis: true,
      width: 150
    },
    {
      title: "收款金额",
      dataIndex: "amount",
      search: false,
      width: 120
    },
    {
      title: "已核销金额",
      dataIndex: "writtenOffAmount",
      search: false,
      width: 120
    },
    {
      title: "剩余资金",
      dataIndex: "leftAmount",
      search: false,
      width: 120
    },
    {
      title: "流水号",
      dataIndex: "paymentSerialNumber",
      search: false,
      width: 120,
    },
    {
      title: "付款方银行",
      dataIndex: "payerBank",
      search: false,
      width: 120,
    },
    {
      title: "收款方账号",
      dataIndex: "payeeCardNo",
      search: false,
      width: 120,
    },
    {
      title: "付款时间",
      dataIndex: "payTime",
      search: false,
      width: 180,
    },
    {
      title: "水单",
      dataIndex: "memoPath",
      search: false,
      render: (_: string, record: collectionRecordTypes) => {
        if (!record?.memoPath) {
          return "-";
        }
        return (
          <Image
            src={record.memoPath}
            width={100}
            height={100}
          />
        )
      }
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      search: false,
      width: 180,
    },
    {
      title: '操作',
      dataIndex: 'options',
      search: false,
      width: 150,
      fixed: 'right',
      render: (_, record: collectionRecordTypes) => {
        return (
          <Space>
            <Button type="link" onClick={() => handleWriteOff(record)}>核销记录</Button>
          </Space>
        );
      }
    }
  ];


  return (
    <> 
      <ProTable
        actionRef={actionRef}
        bordered
        rowKey="id"
        options={false}
        columns={columns}
        search={{span: 6}}
        toolBarRender={() => [
          <Button onClick={handleAdd} type="primary">
            <PlusOutlined />
            新建收款记录
          </Button>
        ]}
        request={async (params = {}) => {
          params.pageNum = params.current;
          const res = await paymentList({
            ...params,
            startTime: params?.time?.[0] ? `${params?.time?.[0]} 00:00:00` : undefined,
            endTime: params?.time?.[1] ? `${params?.time?.[1]} 23:59:59` : undefined,
            time: undefined,
            pageNum: params.current || 1,
            pageSize: params.pageSize || 20,
          });
          return {
            data: res.data || [],
            total: res.total || 0,
            success: true
          }

          return {
            data: [],
            total: 0,
            success: true
          }
        }}
        scroll={{x: calculateTableWidth(columns), y: 650}}
      />
      {addVisible && <CollectionRecord {...addProps} />}
      {writeOffVisible && <WriteOffRecord {...writeOffProps} />}
    </>
  );
};


export default CollectionRecords;